<template>
  <div class="content">

    <!--
    <el-menu class="menu">
      <el-menu-item index="1" @click="ShowItem(1)" style="font-size:18px">
        <i class="el-icon-user"></i>
        <span slot="title">个人信息</span>
      </el-menu-item>
      <br>
      <el-menu-item index="2" @click="ShowItem(2)" style="font-size:18px">
        <i class="el-icon-star-on"></i>
        <span slot="title">我的收藏</span>
      </el-menu-item>
      <br>
      <el-menu-item index="3" @click="ShowItem(3)" style="font-size:18px">
        <i class="el-icon-document"></i>
        <span slot="title">消息中心<el-badge class="mark" :value="GetNoticeNum()" v-show="GetNoticeNum() !== '0'"/></span>
      </el-menu-item>
      <br>
      <el-menu-item index="4" @click="ShowItem(4)" style="font-size:18px">
        <i class="el-icon-view"></i>
        <span slot="title">最近浏览</span>
      </el-menu-item>
    </el-menu>
    -->
    <div style="width:20em; margin-left: 5%; margin-top: 5%">
      <div class="jump">
        <span @click="ShowItem(1)">个人信息</span>
      </div>
      <div class="jump">
        <span @click="ShowItem(2)">我的收藏</span>
      </div>
      <div class="jump">
        <span @click="ShowItem(5)">关注学者</span>
      </div>
      <div class="jump">
        <span @click="ShowItem(3)">消息中心</span>
      </div>
      <div class="jump">
        <span @click="ShowItem(4)">最近浏览</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "personalchoosepad",
  data(){
    return{
      showitem: '',
    }
  },
  methods:{
    ShowItem(v){
      this.showitem = v.toString();
      this.$emit("padchoice", this.showitem);
    },
    GetNoticeNum(){
      return localStorage.getItem('notice_num');
    }
  },

}
</script>

<style scoped>
.content{
  width: 20em;
}
.item {
  margin-top: -1em;
  margin-right: 2em;
}
.mark{
  margin-left: 0.5em;
  margin-top: -0.5em;
}
.menu{
  width:20em;
}
.jump {
  /* background: transparent; */
  border: 0;
  border-radius: 0;
  text-transform: uppercase;
  font-weight: bold;
  font-size:19px;
  padding: 15px 50px;
  position: relative;
  cursor: pointer;
  margin-left:3em;
}

.jump:before {
  transition: all 0.5s cubic-bezier(0.7, -0.5, 0.1, 1);
  content: "";
  width: 1%;
  height: 100%;
  background: #00ffff;
  position: absolute;
  top: 0;
  left: 0;
}

.jump:hover:before {
  background: #00ffff;
  width: 100%;
}

.jump span {
  /* mix-blend-mode: darken; */
  color: #000000;
  background-color: #FFFFFF;
}

.jump:hover span {
  mix-blend-mode: darken;
  color: #000;
  background-color: #fff;
}

.jump:nth-child(1):before {
  background: #7986ca;
}

.jump:nth-child(1):hover:before {
  background: #7986ca;
  width: 100%;
}

.jump:nth-child(2):before {
  background: #afd7f7;
}

.jump:nth-child(2):hover:before {
  background: #afd7f7;
  width: 100%;
}

.jump:nth-child(3):before {
  background: #c8b4e1;
}

.jump:nth-child(3):hover:before {
  background: #c8b4e1;
  width: 100%;
}

.jump:nth-child(4):before {
  background: #e6c9e1;
}

.jump:nth-child(4):hover:before {
  background: #e6c9e1;
  width: 100%;
}
</style>